<template>
  <div>
    <el-upload
      v-if="editMode != 'detail'"
      :multiple="false"
      :action="actionUrlP"
      :headers="headers"
      :on-success="onSuccess"
      :before-upload="onBeforeUpload"
      :on-change="handleOnChange"
      :show-file-list="false"
      :on-progress="onProgress"
      :disabled="loading"
    >
      <el-button :loading="loading" icon="el-icon-upload" type="primary">
        点击上传
      </el-button>
      <span class="tipLabel">{{ tipLabel }}</span>
    </el-upload>
    <div class="el-upload__tip">
      <el-progress
        v-if="loading"
        :percentage="percentage"
        status="success"
        class="w-200"
      ></el-progress>
      <div>
        <div
          style="color: #409eff"
          :key="index"
          class="l-flex--row"
          v-for="(item, index) in fileList"
        >
          <span class="u-pointer" @click="onDownload(item)">
            {{ item.name }}
          </span>
          <i
            class="el-icon-download download"
            @click="onDownload(item, true)"
          ></i>
          <i
            v-if="editMode != 'detail'"
            class="el-icon-error close"
            @click="onRemove(index)"
          ></i>
        </div>
      </div>
      <slot name="tip"></slot>
    </div>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth';
import { basePath } from '@/utils/request';
import { shot } from '@/api/serve/media-file';
import Download from '@/views/_mixins/download';
export default {
  name: 'CFileUploadListNew',
  mixins: [Download],
  props: {
    actionUrl: {
      type: String,
      default: ''
    },
    beforeUpload: {
      type: Function,
      default: () => {}
    },
    tipLabel: {
      type: String,
      default: ''
    },
    editMode: {
      type: String,
      default: 'edit'
    },
    value: {
      type: String,
      default: ''
    }
  },
  computed: {
    actionUrlP() {
      return basePath + this.actionUrl;
    },
    headers() {
      let token = getToken();
      return token ? { Authorization: token } : {};
    },
    fileList() {
      if (!this.value) return [];
      return this.value.split(',').map(i => {
        return { name: i.split('|')[1], fileUrl: i.split('|')[0] };
      });
    }
  },
  data() {
    return {
      filePath,
      loading: false,
      percentage: 0
    };
  },
  methods: {
    getFileStr(list) {
      return list
        .reduce((acc, cur) => {
          return `${acc},${cur.fileUrl}|${cur.name}`;
        }, '')
        .slice(1);
    },
    onDownload({ fileUrl: url, name }, download = false) {
      if (download) {
        this.downloadFile(url, name, null, true, false);
        return;
      }
      window.open(this.filePath + url);
      // const eleLink = document.createElement('a');
      // eleLink.style.display = 'none';
      // eleLink.href = this.filePath + url;
      // eleLink.download = false;
      // eleLink.target = '_blank';
      // document.body.appendChild(eleLink);
      // eleLink.click();
      // document.body.removeChild(eleLink);
    },
    onSuccess({ fileUrl, name }, file, fileList) {
      name = name.replaceAll('|', '');
      name = name.replaceAll(',', '');
      this.$emit(
        'input',
        this.getFileStr(
          this.fileList.concat({
            fileUrl,
            name
          })
        )
      );
    },
    onBeforeUpload(file) {
      const valid = this.beforeUpload(file);
      if (valid === false) {
        this.loading = false;
        this.percentage = 0;
        return false;
      }
    },
    onRemove(index) {
      let arr = this.fileList;
      arr.splice(index, 1);
      this.$emit('input', this.getFileStr(arr));
    },
    handleOnChange(file, fileList) {
      this.loading = true;
      if (file.percentage == 100) {
        this.loading = false;
        this.percentage = 0;
      }
    },
    onProgress(file) {
      this.percentage = file.percent;
    }
  }
};
</script>
<style lang="scss" scoped>
.close {
  font-size: 16px;
  color: red;
  cursor: pointer;
  margin-left: 16px;
}
.download {
  font-size: 16px;
  color: #409eff;
  cursor: pointer;
  margin-left: 26px;
}
.w-200 {
  max-width: 200px;
}
.tipLabel {
  color: #c0c4cc;
  font-size: 12px;
  margin-left: 20px;
}
.el-upload__tip{
  margin-top:0
}
</style>
